<template>
  <BasicModal v-bind="$attrs" @register="registerListModal" title="桌台类型" :width="600">
    <BasicTable @register="registerTable" :rowClassName="getRowClassName">
      <template #tableTitle>
        <a-button type="primary" @click="handleCreate">新增</a-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
  </BasicModal>
  <CategoryModal @register="registerModal" @success="handleCategoryChange"/>
</template>
<script lang="ts" setup>
import { ref, computed, reactive } from 'vue';
import { BasicModal, useModalInner, useModal } from '/@/components/Modal';
import { categoryColumns } from './table.data';
import { useMessage } from '/@/hooks/web/useMessage';
import { useDesign } from '/@/hooks/web/useDesign'
import { BasicTable, TableAction, ActionItem } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage'
import { listTableCategory, deleteCategory } from './table.api';
import CategoryModal from './CategoryModal.vue';
// 声明Emits
const emit = defineEmits(['success', 'register']);

const { createMessage } = useMessage();
const [registerModal, {openModal}] = useModal();
const compData = reactive<any>({
  tenantId: null
})

const { prefixCls, tableContext } = useListPage({
  designScope: 'table-category-list',
  tableProps: {
    api: listTableCategory,
    columns: categoryColumns,
    rowKey: "id",
    striped: true,
    pagination: false,
    useSearchForm: false,
    bordered: true,
    showIndexColumn: false,
    canResize: false,
    immediate: false,
    actionColumn: {
      width: 200,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: undefined,
    },
    beforeFetch: (params) => {
      params.tenantId = compData.tenantId
    },
  }
  
});
const [registerTable, { reload }, { }] = tableContext

//表单赋值
const [registerListModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  setModalProps({
    confirmLoading: false,
    showCancelBtn: false,
    canFullscreen: false,
    showOkBtn: false,
    draggable: false
  });
  compData.tenantId = data?.tenantId
  reload()
})

const handleEdit = (record) => {
  openModal(true, { record, tenantId: compData.tenantId, isUpdate: true})
}

const handleDelete = async (record) => {
  await deleteCategory({ id: record.id, tenantId: compData.tenantId}, () => {
    reload()
    createMessage.success('删除成功')
    emit('success')
  })
}
/**
 * 操作栏
 */
const getTableAction = (record): ActionItem[] => {
  return [
    {
      label: '编辑',
      onClick: handleEdit.bind(null, record),
    },
    {
      label: '删除',
      popConfirm: {
        title: '是否确认删除',
        confirm: handleDelete.bind(null, record),
      },
    }
  ];
}

const getRowClassName = (record) => {
  return prefixCls;
}
const handleCreate = () => {
  openModal(true, { tenantId: compData.tenantId, isUpdate: false})
}
const handleCategoryChange = () => {
  reload()
  emit('success')
}
</script>
